﻿@{
    Layout = null;
}
@*优惠券*@

<link href="~/Scripts/Bootstrap/css/bootstrap-datepicker3.min.css" rel="stylesheet" />
<script src="~/Scripts/Bootstrap/js/bootstrap-datepicker.js"></script>
<style>
    .form-horizontal .form-group {
        margin-bottom: 15px;
    }
</style>
<form id="YHJform" class="form-horizontal" onkeydown="if(event.keyCode==13){return false;}">
    <div class="list-con">

        <div class="form-group">
            <div class="col-md-2 text-right">优惠券名称：</div>
            <div class="col-md-7 forTime">
                <input type="text" placeholder="优惠券名称" name="Name" class="form-control" />
                <input type="hidden" name="type" value="2" />
            </div>
            <div class="col-md-3"></div>
        </div>
        <div class="form-group">
            <div class="col-md-2 text-right">商城：</div>
            <div class="col-md-7">
                <select name="Mall" class="form-control">
                    <option value="1">码管家云商城</option>
                    <option value="2">淘宝</option>
                    <option value="3">天猫</option>
                    <option value="4">京东</option>
                    <option value="5">苏宁</option>
                    <option value="6">其他</option>
                </select>
            </div>
            <div class="col-md-3"></div>

        </div>
        <div class="form-group">
            <div class="col-md-2 text-right">优惠券类型：</div>
            <div class="col-md-7">
                <select name="CouponType" class="form-control">
                    <option value="0">代金券</option>
                    <option value="1">折扣券</option>
                </select>
            </div>
            <div class="col-md-3"></div>
        </div>
        <div class="form-group money">
            <div class="col-md-2 text-right" style="margin-top:5px;">代金券面额：</div>
            <div class="col-md-10">
                <span style="margin: 0" class="btn btn-default active-normal">自定义金额</span>
                <input placeholder="自定义金额" type="text" style="width:100px;margin-left:10px;display:none" />
                <span class="btn btn-success active-money" data-id="3">3元</span>
                <span class="btn btn-default active-normal" data-id="5">5元</span>
                <span class="btn btn-default active-normal" data-id="10">10元</span>
                <span class="btn btn-default active-normal" data-id="15">15元</span>
                <span class=" btn btn-default active-normal" data-id="20">20元</span>
                <span class=" btn btn-default active-normal" data-id="100">100元</span>
                <input type="hidden" name="Denomination" id="YHJMoeny" value="3" />
            </div>
        </div>


        <div class="form-group discount" style="display:none">
            <div class="col-md-2 text-right" style="margin-top:5px;">折扣券折扣：</div>
            <div class="col-md-10 discount">
                <span style="margin: 0" class="btn btn-default active-normal">自定义折扣</span>
                <input placeholder="自定义折扣" type="text" style="width:100px;margin-left:10px;display:none" />
                <span class="btn btn-success active-money" data-id="9.9">9.8折</span>
                <span class="btn btn-default active-normal" data-id="9.5">9.5折</span>
                <span class=" btn btn-default active-normal" data-id="8.5">8.5折</span>
                <span class="btn btn-default active-normal" data-id="8.2">8.2折</span>
                <span class=" btn btn-default active-normal" data-id="7.5">7.5折</span>
                <span class="btn btn-default active-normal" data-id="7">7折</span>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-2 text-right">优惠券有效期：</div>
            <div class="col-md-3 forTime">
                <input name="StartDate" id="StartDate" class="form-control date" />
            </div>
            <div class="col-md-1 text-center">至</div>
            <div class="col-md-3 forTime">
                <input name="EndDate" id="EndDate" class="form-control date" />
            </div>
        </div>
        <div class="form-group">

            <div class="col-md-2 text-right">使用条件：</div>
            <div class="col-md-7 forTime">
                <input type="number" name="UseCondition" class="form-control" />
            </div>
            <div class="col-md-3">元（订单满多少元使用）</div>
        </div>
        <div class="form-group">
            <span class="col-md-2 text-right">发放数量：</span>
            <div class="col-md-7 forTime">
                <input type="number" name="TotalNums" id="YHJNum" class="form-control" />
            </div>
            <div class="col-md-3"></div>
        </div>
        <div class="form-group toChange">
            <div class="col-md-2 text-right">预设金额：</div>
            <div class="col-md-7 forTime">
                <input readonly="readonly" type="text" name="TotalMoney" id="YHJMoney" class="form-control" />
            </div>
            <div class="col-md-3"></div>
        </div>
        <div class="form-group Remark">
            <div class="col-md-2 text-right">备注：</div>
            <div class="col-md-7">
                <input type="text" name="Remark" class="form-control" />
            </div>
            <div class="col-md-3"></div>
        </div>
        <div class="form-group Link" style="display:none">
            <div class="col-md-2 text-right">优惠券链接：</div>
            <div class="col-md-7">
                <input type="text" class="form-control" placeholder="优惠券链接" />
            </div>
            <div class="col-md-3"></div>
        </div>
    </div>
</form>
<script>
    $(function () {
        //$('input.date').fdatepicker({
        //    format: 'yyyy-mm-dd',
        //});

        $("#StartDate").datepicker({
            format: "yyyy-mm-dd",
            language: 'cn',
            todayBtn: "linked",
            autoclose: true,
            todayHighlight: true,
        }).on('hide', function (e) {
            $('#YHJform').data('bootstrapValidator')
                .updateStatus('StartDate', 'NOT_VALIDATED', null)
                .validateField('StartDate');
        });
        $("#EndDate").datepicker({
            format: "yyyy-mm-dd",
            language: 'cn',
            todayBtn: "linked",
            autoclose: true,
            todayHighlight: true,
        }).on('hide', function (e) {
            $('#YHJform').data('bootstrapValidator')
                .updateStatus('EndDate', 'NOT_VALIDATED', null)
                .validateField('EndDate');
        });


        //切换商城类型
        $('#YHJform select[name="Mall"].form-control').change(function () {
            var str = $(this).val();
            if (str === '6') {
                $(this).parent().parent().nextAll('div.form-group').css('display', 'none');
                $(this).parent().parent().nextAll('div.form-group.Link').css('display', 'block');
            }
            else {
                $(this).parent().parent().nextAll('div.form-group').css('display', 'block');
                $(this).parent().parent().nextAll('div.form-group.discount').css('display', 'none');
                $(this).parent().parent().nextAll('div.form-group.Link').css('display', 'none');
            }
        })
        //切换券类型
        $('#YHJform select[name="CouponType"].form-control').change(function () {
            var str = $(this).val();
            if (str === '0') {
                $(this).parent().parent().next('div.form-group').next('div.form-group').css('display', 'none');
                $(this).parent().parent().next('div.form-group').css('display', 'block');
                $(this).parent().parent().nextAll('div.toChange').css('display', 'block');
                $("input#YHJMoeny").val(3);
            }
            else {
                $(this).parent().parent().next('div.form-group').next('div.form-group').css('display', 'block');
                $(this).parent().parent().next('div.form-group').css('display', 'none');
                $("input#YHJMoeny").val('9.9');
                $(this).parent().parent().nextAll('div.toChange').css('display', 'none');
            }
        })





        //优惠券金额选择
        $('#YHJform div.form-group.money').on('click', 'span.btn', function () {
            $(this).siblings().removeClass('btn-success').addClass('btn-default');
            $(this).removeClass('btn-default').addClass('btn-success');
            $("#YHJMoeny").val($(this).data("id"));
            var TotalNums = $('#YHJform .col-md-7 input[name="TotalNums"]').val();
            if (TotalNums != '') {
                $('#YHJform .col-md-7 input[name="TotalMoney"]').val(parseInt(TotalNums) * parseInt($(this).data("id")));
            }

        });
        $('#YHJform .col-md-7 input[name="TotalNums"]').blur(function () {
            var TotalMoney = parseInt($('.money .col-md-10 .btn.btn-success').data("id")) * $(this).val();
            $('#YHJform .col-md-7 input[name="TotalMoney"]').val(TotalMoney);
        })





        $('#YHJform div.form-group.discount').on('click', 'span.btn', function () {
            $(this).siblings().removeClass('btn-primary').addClass('btn-default');
            $(this).removeClass('btn-default').addClass('btn-primary');
            $("#YHJMoeny").val($(this).data("id"));

        });




        $('#YHJform').bootstrapValidator({
            group: '.forTime',
            fields: {
                Template: {
                    validators: {
                        notEmpty: {
                            message: '模板名称不能为空'
                        },
                    }
                },
                Name: {
                    validators: {
                        notEmpty: {
                            message: '优惠券名称不能为空'
                        },
                    }
                },
                TotalNums: {
                    validators: {
                        notEmpty: {
                            message: '发放数量不能为空'
                        },
                        regexp: {
                            regexp: /^[1-9]\d*$/,
                            message: '请输入大于0的整数'
                        }
                    }
                },
                TotalMoney: {
                    validators: {
                        notEmpty: {
                            message: '发放总流量不能为空'
                        },
                        regexp: {
                            regexp: /^[1-9]\d*$/,
                            message: '请输入大于0的整数'
                        }
                    }
                },
                UseCondition: {
                    validators: {
                        notEmpty: {
                            message: '使用条件不能为空'
                        },
                        regexp: {
                            regexp: /^[1-9]\d*$/,
                            message: '请输入大于0的整数'
                        }
                    }
                },
                StartDate: {
                    validators: {
                        notEmpty: {
                            message: '开始日期不能为空'
                        },
                       
                    }
                },
                EndDate: {
                    validators: {
                        notEmpty: {
                            message: '结束日期不能为空'
                        },
                       
                    }
                },


            }
        });
      

    })
</script>
